<template>
  <div class="default-content-background page-count" style="padding-top:10px;">
    <qtable
      :querys="querys"
      :columns = "columns"
      dataApi="/admin/payment/readyChargeList"
      ref="unpayTable"
      >
    </qtable>
    <z1001modal
      :is-show="isShowConfirmPop"
      :content="confirmPopText"
      @on-close='closeDialog("isShowConfirmPop")'
      @on-confirm='confirmOption'>
    </z1001modal>
  </div>
</template>

<script>
import z1001modal from "../../components/z1001Modal.vue";
import qtable from "../../components/qTable.vue";
export default {
  name: "page-count",
  data() {
    return {
      isShowConfirmPop: false,
      confirmPopText: "",
      confirmType: "",
      currentRow: {},
      columns: [
        {
          title: "操作时间",
          align: "center",
          key: "insert_time"
        },
        {
          title: "用户手机号码",
          align: "center",
          key: "phone_number"
        },
        {
          title: "备注ID",
          align: "center",
          key: "id"
        },
        {
          title: "充值金额",
          align: "center",
          key: "money_count",
          render: (h, params) => {
            let renderText = `${params.row.money_count / 100}`;
            return h("div", [h("span", renderText)]);
          }
        },
        {
          title: "操作",
          key: "customOptions",
          width: 205,
          align: "center",
          render: (h, params) => {
            let vm = this;
            let hasCharged = params.row.recent_charge_time;
            let options = {
              addMoney: h(
                "a",
                {
                  style: {
                    marginRight: "5px",
                    color: "red"
                  },
                  on: {
                    click: () => {
                      vm.showOption("delete", params.row);
                    }
                  }
                },
                "关闭"
              ),
              subtractMoney: h(
                "a",
                {
                  style: {
                    marginRight: "5px"
                  },
                  on: {
                    click: () => {
                      vm.showOption("charge", params.row);
                    }
                  }
                },
                "确认充值"
              )
            };
            let result = [options.addMoney, options.subtractMoney];
            return h("div", result);
          }
        }
      ],
      querys: {
        queryTips: ["用户手机号"],
        queryTypes: ["input"],
        queryParamNames: ["phoneNumber"]
      }
    };
  },
  filters: {},
  methods: {
    closeDialog(name) {
      this[name] = false;
    },
    showOption(type, row) {
      if (type === "delete") {
        this.confirmPopText = "确认关闭这条待充值记录吗？";
      } else {
        this.confirmPopText = `确认给用户${row.phone_number}充值${row.money_count /
          100}元人民币吗？`;
      }
      this.currentRow = row;
      this.confirmType = type;
      this.isShowConfirmPop = true;
    },
    async confirmOption() {
      this.isShowConfirmPop = false;
      let response = "";
      try {
        if (this.confirmType === "delete") {
          response = await this.$api.deleteRecord({
            id: this.currentRow.id
          });
          let modalConfig = {
            type: "success",
            content: "关闭记录成功!"
          };
          this.$store.commit("showGlobalModal", modalConfig);
        } else {
          response = await this.$api.confirmChargeRecord({
            id: this.currentRow.id
          });
          let modalConfig = {
            type: "success",
            content: "确认充值成功!"
          };
          this.$store.commit("showGlobalModal", modalConfig);
        }
      } catch (error) {
        let modalConfig = {
          type: "fail",
          content: "服务器异常,操作失败!"
        };
        this.$store.commit("showGlobalModal", modalConfig);
      }
      this.$refs.unpayTable.getTableDataByHttp();
    }
  },
  components: {
    qtable,
    z1001modal
  },

  mounted: function() {}
};
</script>

<style lang="less">
.page-count {
  padding: 10px;
  padding-top: 56px;
}
</style>
